﻿<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<style>
<!--
.simple-body-small {
	height: 200px;
}

#table-disk th {
	border-top: 1px solid #ccc;
	background-color: #e2e2e2;
}

#table-disk td:FIRST-CHILD,#table-disk th:FIRST-CHILD {
	border-left: 1px solid #ccc;
	cursor: pointer;
}

#table-disk td,#table-disk th {
	padding: 10px 6px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: center;
}

body {
	overflow: hidden;
}
-->
</style>
<div style="padding: 3px;overflow-x:hidden;">
	<table style="width: 100%;">
		<tr>
			<td nowrap>CPU使用率:</td>
			<td style="width:100%"><div class="div-progress layui-progress-big">
					<div class="div-progress-bar layui-bg-green " id="progress-cpu">0.0%</div>
				</div></td>
		</tr>
		<tr>
			<td nowrap>磁盘使用率:</td>
			<td style="width:100%"><div class="div-progress layui-progress-big">
					<div class="div-progress-bar layui-bg-green " id="progress-io">0.0%</div>
				</div></td>
		</tr>
		<tr>
			<td nowrap>内存使用率:</td>
			<td style="width:100%"><div class="div-progress layui-progress-big">
					<div class="div-progress-bar layui-bg-green " id="progress-mem">0.0%</div>
				</div></td>
		</tr>
	</table>
	<div>
		<table class="" id="table-disk" style="width:100%">
			<thead>
				<tr>
					<th style="text-align: left;">磁盘目录</th>
					<th>总量(G)</th>
					<th>已用(G)</th>
					<th>比例</th>
				</tr>
			</thead>
			<tbody id="tbody-disk"></tbody>
		</table>
	</div>
	<div class="layui-row">
		<div class="layui-col-md6">
			<canvas id="cpuline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
		<div class="layui-col-md6">
			<canvas id="memline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md6">
			<canvas id="ioline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
		<div class="layui-col-md6">
			<canvas id="diskline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md6">
			<canvas id="netinline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
		<div class="layui-col-md6">
			<canvas id="netoutline" class="simple-body-small" class="chartjs" ></canvas>
		</div>
	</div>
</div>
<!-- layui规范化用法 -->
<script type="text/javascript">

	function loadRate() {
		var host = workUtils.get("host");
		workUtils.ajaxGet("../data/detailRate", {
			host : host
		}, function(data) {
			$("#progress-cpu").width(data[0]);
			$("#progress-cpu").text(data[0]);
			$("#progress-mem").width(data[2]);
			$("#progress-mem").text(data[2]);
			$("#progress-io").width(data[1]);
			$("#progress-io").text(data[1]);
		});
		workUtils.ajaxGet("../data/disk", {
			host : host
		}, function(data) {
			$("#tbody-disk").html(data);
		});

		workUtils.ajaxGet("../data/detail1", {
			host : host
		}, function(data) {
			for (var i = 0; i < data.length; i++) {
				eval(data[i]);
			}
		});
		workUtils.ajaxGet("../data/detail2", {
			host : host
		}, function(data) {
			for (var i = 0; i < data.length; i++) {
				eval(data[i]);
			}
		});
		workUtils.ajaxGet("../data/detail3", {
			host : host
		}, function(data) {
			for (var i = 0; i < data.length; i++) {
				eval(data[i]);
			}
		});
	}

	workUtils.ajaxGet("/data/host", {}, function(data) {
		var html = "";
		for ( var key in data) {
			html += '<tr><td>' + key + '</td></tr>';
		}
		$("#table-detail").html(html);
	});
	loadRate();
</script>
